<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 52 52"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path d="M25.99 43.865a1.605 1.605 0 0 1-1.139-.466c-.032-.03-1.258-1.149-3.726-1.149H3.25a1.625 1.625 0 0 1-1.625-1.625V9.75A1.625 1.625 0 0 1 3.25 8.125h17.875A6.484 6.484 0 0 1 26 10.33a6.484 6.484 0 0 1 4.875-2.205H48.75a1.625 1.625 0 0 1 1.625 1.625v30.875a1.625 1.625 0 0 1-1.625 1.625H30.875c-2.468 0-3.694 1.12-3.744 1.168a1.67 1.67 0 0 1-1.14.447ZM4.875 39h16.25c2.262 0 3.884.663 4.875 1.25.991-.587 2.613-1.25 4.875-1.25h16.25V11.375h-16.25a3.253 3.253 0 0 0-3.25 3.25V35.75a1.625 1.625 0 1 1-3.25 0V14.625a3.253 3.253 0 0 0-3.25-3.25H4.875V39Z" data-follow-fill="#0389FF" :fill="_fill"/><path d="M26 48.75c-2.774 0-4.586-.998-5.45-1.625H3.25A1.625 1.625 0 0 1 1.625 45.5v-5.923a1.625 1.625 0 0 1 3.25 0v4.298h16.25c.43 0 .845.17 1.149.476.032.03 1.258 1.149 3.726 1.149s3.694-1.12 3.746-1.168a1.688 1.688 0 0 1 1.129-.457h16.25v-3.25a1.625 1.625 0 1 1 3.25 0V45.5a1.625 1.625 0 0 1-1.625 1.625h-17.3c-.864.627-2.676 1.625-5.45 1.625ZM19.5 19.5H9.75a1.625 1.625 0 1 1 0-3.25h9.75a1.625 1.625 0 1 1 0 3.25Zm0 6.5H9.75a1.625 1.625 0 1 1 0-3.25h9.75a1.625 1.625 0 1 1 0 3.25Zm0 6.5H9.75a1.625 1.625 0 1 1 0-3.25h9.75a1.625 1.625 0 1 1 0 3.25Zm22.75-13H32.5a1.625 1.625 0 1 1 0-3.25h9.75a1.625 1.625 0 1 1 0 3.25Zm0 6.5H32.5a1.625 1.625 0 1 1 0-3.25h9.75a1.625 1.625 0 1 1 0 3.25Zm0 6.5H32.5a1.625 1.625 0 1 1 0-3.25h9.75a1.625 1.625 0 1 1 0 3.25Z" data-follow-fill="#0389FF" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Frame_8503bknj extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
